import React, { useEffect } from "react";
import { connect } from "react-redux";

import * as Action from "store/add-promotion-position/action";
import * as css from "./css/add-promotion-position";

function AddPromotionPosition(props) {
  const { action, addPromotionPosition } = props;
  const { name } = addPromotionPosition;
  useEffect(() => {
    action.init();
  }, [action]);

  function onNameChange(e) {
    action.setName(e.currentTarget.value);
  }

  return (
    <css.AddPromotionPosition>
      <css.Input
        placeholder="请输入推广位名称"
        value={name}
        onChange={onNameChange}
        allowClear
      />
    </css.AddPromotionPosition>
  );
}

export default connect(
  state => {
    const { addPromotionPosition } = state;

    return {
      addPromotionPosition
    };
  },
  f => ({
    action: {
      setName() {
        f(Action.setName(...arguments));
      },
      init() {
        f(Action.init(...arguments));
      }
    }
  })
)(AddPromotionPosition);
